<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS选择器</title>

  <!-- CSS 引入方式
  -->
  
  <!-- 1、内嵌样式 
  <ul class="clearfix demo" style="color: red;">
  -->
    
  <!-- 2、head 中 style 标签引入
  -->
  <style>
    /* 1、基本选择器
      *                       通配选择器
      #id                     id选择器
      .class                  类选择器
      E                       元素选择器
      seletorA,..., selectorZ 群组选择器
     */
    * {
      padding: 0;
      margin: 0;
    }
    .clearfix::before, .clearfix::after {
      display: table;
    }
    .clearfix:after {
      clear:both;
      overflow:hidden
    }
    .demo {
      width: 250px;
      height: 20px;
      border: 1px solid #ccc; 
      padding: 10px;
      margin: 20px auto
    }
    ul {
      background-color: aquamarine;
    }
    li {
      list-style:none; 
      float: left; 
      height: 20px; 
      line-height: 20px;
      width: 20px;border-radius: 10px;
      text-align: center; 
      background: #f36; 
      color: green; 
      margin-right: 5px;
    }
    #first {
      background-color: blueviolet;
      color: white;
    }
    #last {
      background-color: black;
      color: blanchedalmond;
    }
    .item {
      background-color: chartreuse;
      color: white;
      font-weight: 400;
    }
    .item.important {
      color: red;
    }
  </style>

  <!-- 3、外部链接(link or  style)引入 
  <style>@import url(".style.css");</style>
  <link rel="stylesheet" href="style.css">
  -->
  

</head>
<body>
  <div>
    <ul class="clearfix demo" style="color: red;">
      <li class="first" id="first">1</li>
      <li class="active">2</li>
      <li class="important item">3</li>
      <li class="important">4</li>
      <li class="item">5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li class="last" id="last">10</li>
    </ul>
  </div>
</body>
</html>